<template>
    <div>
        <div class="head" style="z-index:100;">
            <img @click="goback" src="@/assets/imgs/back.png" alt="">
            <span v-show="is"> {{cinemaDtl.name}}</span>
        </div>
        <van-sticky @scroll="scroll">
        <div v-show="is2" class="nameLine">
          {{cinemaDtl.name}}
        </div>
        </van-sticky>
        <ul class="movieDes">
        <li v-for="service in cinemaDtl.services" :key="service.name">{{service.name}}</li>
        <li>></li>
        </ul>
        <div class="addressLine">
            <img class="location" src="@/assets/imgs/location.png" alt="">
            <span>{{cinemaDtl.address}}</span>
            <img class="tel" src="@/assets/imgs/tel.png" alt="">
        </div>
        <cnm-banner :data="filmsDtl" :id="currentIndex" v-if="filmsDtl.length" @selectIndex="selectEvent($event)"></cnm-banner>
        <router-view :activeDtl="activeInfo"></router-view>
    </div>
</template>
<style lang="scss" scoped>
.head{
    width:100%;
    height:0.88rem;
    position: fixed;
    top:0;
    left:0;
    padding-left:0.3rem;
    box-sizing: border-box;
    background-color: white;

    img{
    width:0.44rem;
    height:0.72rem;
    float:left;
    margin-top:0.1rem
    }
    span{
        width:6rem;
            height:0.88rem;
    line-height:0.88rem;
    text-align: center;
    font-size:0.34rem;
    color: #191a1b;
    float:left;
    }
}
.nameLine{
    height:0.88rem;
    line-height:0.88rem;
    text-align: center;
    margin-top:0.88rem;
    font-size:0.34rem;
    color: #191a1b;
        background-color: white;

}
.movieDes{
    height:0.76rem;
    color: #ffb232;
    padding:0.1rem 0 0.1rem;
    display: flex;
    justify-content: center;
    li{
        float:left;
        height:0.36rem;
        line-height: .36rem;
        border: 0.01rem solid  #ffb232;
        padding:0.02rem 0.1rem;
        margin:0 0.1rem;
        box-sizing: border-box;
        font-size: .13rem;
    }
            :nth-last-child(1){
        border:none;
            }
}
.addressLine{
    height:1rem;
    padding-left:0.34rem;
    padding-top:0.3rem;
    box-sizing: border-box;

    .location{
     width:0.28rem;
     height:0.42rem;
     float: left;
    }
    span{
            font-size: 0.28rem;
        width:5.54rem;
        height:0.4rem;
        padding:0 0.24rem;
        box-sizing: border-box;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        float: left;

    }
    .tel{
             float: left;
                     width:0.34rem;
                     height:0.31rem;
                     padding:0 0.5rem;



    }
}

</style>

<script>
import { getCinemaDetail,getFilmsDetail} from "@/api/cinema.js";
import cinemaVue from './cinema.vue';
import CnmBanner from "./component/banner";
export default {
    data(){
        return{
    cinemaDtl:'',
    cinemaId:this.$route.params.id,
    filmsDtl:[],
    activeInfo:'',
    is:false,
    is2:true,
    path:'',
    currentId:'',
    currentIndex:''
    
        }
    },
    // 新知识点，这个钩子函数在beforecreated前面
     beforeRouteEnter(to,from,next){
           console.log(to,from)
           next((vm)=>{
               if(vm.$route.name==="CinemaDetail")
               {
               vm.path=from.fullPath;
               }
               if(vm.$route.name==="playdetail"){
               vm.path=from.fullPath;
               vm.currentId=vm.$route.params.mid
               }
           });

       },
    methods:{
        getCinemaDtl(){
            getCinemaDetail({cinemaId:this.cinemaId}).then(res=>{
                this.cinemaDtl=res.data.cinema
            })
        },
        getFilmDtl(){
            getFilmsDetail({cinemaId:this.cinemaId}).then(res=>{
                this.filmsDtl=res.data.films
                this.getcurrentId()
            })
        },
       selectEvent(e){
           this.activeInfo=this.filmsDtl[e]
           this.$router.push(`/cinemas/${this.cinemaId}/films/${this.activeInfo.filmId}/${this.activeInfo.showDate[0]}`)
       },
       scroll(e){
              this.is=e.isFixed
                            this.is2=!e.isFixed

       },
       goback(){
           this.$router.push(this.path)
       },
       getcurrentId(){
            this.filmsDtl.forEach((item,index)=>{
                if(item.filmId==this.currentId){
                    this.currentIndex=index
                    console.log(2222222222222222222,this.currentIndex)
                }
            })
       }
      
    },
    created(){
    },
    watch:{
        $route:{
            handler(val){
           this.cinemaId=this.$route.params.id
           this.getCinemaDtl()
           this. getFilmDtl()
            },
             immediate:true
        }
           
    },
    components:{
        CnmBanner
    }
}
</script>

<style lang="scss" scoped>
.top{
    font-size:0.35rem;
}

</style>